<template>
  <div>
    <div v-show="status">
      <h1>商品分类</h1>
      <el-button type="success" @click="status = !status">添加品类</el-button>
      <el-table :data="list" style="width: 100%" border>
        <el-table-column prop="id" label="品类id"> </el-table-column>
        <el-table-column prop="name" label="品类名称"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-tag type='danger'  @click="open(scope.row)"
              >修改名称</el-tag
            >
            <router-link :to="'/goodsSon/' + scope.row.id"
              ><el-tag type="success">查看子分类</el-tag></router-link
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div v-show="!status">
      <h1>添加品类</h1>
      <el-form>
        <el-form-item label='所属品类'>
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="(item, index) in list"
              :key="index"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label='品类名称'>
          <el-input v-model="content"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click='add' type='danger'>添加品类</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { goods_cate, cate_edit, cate_add } from "@/api/api";
export default {
  name: "",
  components: {},
  props: [],
  data() {
    return {
      list: [],
      status: true,
      value: "",
      content:'',
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.getlist();
  },
  methods: {
    async getlist() {
      const { data: res } = await goods_cate();
      this.list = res.data;
    },
    // 修改
    open(data) {
      this.$prompt("请输入修改名称", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPlaceholder: data.name,
      })
        .then(({ value }) => {
          console.log(value);
          cate_edit(
            `/api/category/set_category_name.do?categoryId=${data.id}&categoryName=${value}`
          )
            .then((res) => {
              this.$message.success(res.data.data);
              this.getlist();
            })
            .catch((err) => {
              console.log(err);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },
    // 添加
    async add(){
     console.log(this.value,this.content)
      const {data:res} = await cate_add(`/api/category/add_category.do?parentId=${this.value}&categoryName=${this.content}`);
      console.log(res)
      this.$message.success(res.data)
      this.status = true;
    }
  },
};
</script>
<style scoped>
</style>